<template>
	<view class="data-item">
		<view class="order-type">
			<view>意见反馈</view>
			<view>{{value.apply_no}}</view>
		</view>
		<view class="order-info">
			<view class="info-item"><view class="key">反馈人：</view>{{value.pm_feedback.apply_user || '暂无'}}</view>
			<view class="info-item"><view class="key">业主单位：</view>{{value.pm_feedback.apply_company_name || '暂无'}}</view>
			<view class="info-item"><view class="key">反馈类型：</view>{{feedBackType[value.pm_feedback.fb_type] || '无'}}</view>
			<view class="info-item"><view class="key">空间区域：</view>{{value.pm_feedback.fb_address || '无'}}</view>
			<view class="info-item"><view class="key">反馈时间：</view>{{value.pm_feedback.apply_date || '无'}}</view>
			<view class="info-item"><view class="key">反馈描述：</view><text>{{value.pm_feedback.fb_desc || '无'}}</text></view>
			<view v-if="value.pm_feedback.fb_pic" class="info-item"><view class="key"></view>
				<image-list :pics="value.pm_feedback.fb_pic"></image-list>
				<!-- <view class="info-imgs">
					<image v-for="(img, index) of value.pm_feedback.deal_pic" :key="index" class="img-item" mode="aspectFill" src="/static/temp/temp.jpeg"></image>
				</view> -->
			</view>
		</view>
		<view v-if="value.pm_feedback.status == 'ACCEPT' && $util.getRights().pm_feedback_accept" class="handle-btn">
			<view @click="acceptFeedBack" >立即受理</view>
		</view>
		<view v-else-if="value.pm_feedback.status == 'HANDLE' &&  $util.getRights().pm_feedback_deal" class="handle-btn">
			<view @click="doneFeedBack" v-if="value.pm_feedback.followman_id == userId" >立即处理</view>
			<view @click="detailFeedBack" v-else>查看详情</view>
		</view>
		<view v-else class="handle-btn">
			<view @click="detailFeedBack">查看详情</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Feedback',
	props:{
		value: {
			type: Object,
			default: ()=>{
				return {}
			}
		}
	},
	data(){
		return {
			userId: '',
			feedBackType: {}
		}
	},
	created(){
		this.init()

		// console.warn("意见箱： ", this.value)
	},
	methods:{
		init(){
			// console.log('$util.getRights()',this.$util.getRights())
			let loginInfo = this.$util.getStorage("loginInfo")
			this.userId = loginInfo.id
			this.$util.initFeedbackType().then((res)=>{
				console.log('initFeedbackType', res)
				this.feedBackType = res
			})
		},
		acceptFeedBack(){
			uni.navigateTo({
				url: '/pagesA/ideas-box/ideas-box-accept?feedBackId=' + this.value.pm_feedback.pm_feedback_id
			})
		},
		doneFeedBack(){
			uni.navigateTo({
				url: '/pagesA/ideas-box/ideas-box-done?feedBackId=' + this.value.pm_feedback.pm_feedback_id
			})
		},
		detailFeedBack(){
			uni.navigateTo({
				url: '/pagesA/ideas-box/ideas-box-detail?feedBackId=' + this.value.pm_feedback.pm_feedback_id
			})
		},
	}
}

</script>

<style lang="scss" scoped>
.data-item {

// display: flex;
// margin-bottom: 30rpx;
.order-type {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #999999;

	>view:first-child {
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
	}
}

.order-info {
	margin: 30rpx 0;

	.info-item {
		display: flex;
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;

		.key {
			min-width: 150rpx;
			font-size: 28rpx;
			color: #999999;
		}

		.info-imgs {
			display: flex;
			flex-wrap: wrap;

			.img-item {
				width: 120rpx;
				height: 120rpx;
				margin: 2rpx 2rpx 0 0;
			}
		}
	}
}

.handle-btn {
	border-top: 1px solid #F5F5F5;
	height: 95rpx;
	margin-top: 20rpx;
	display: flex;

	>view {
		height: 95rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		flex: 1;
	}

	& :last-child {
		color: #0055FE;
	}
}

.target-info {
	flex: 1;
	display: flex;
	padding-bottom: 20rpx;

	.img {
		width: 260rpx;
		height: 295rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.top {
		.name {
			font-size: 28rpx;
			font-weight: bolder;
			color: #333333;
		}

		.desc {
			font-size: 28rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}

	.fee {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;

		.amount {
			font-size: 36rpx;
			color: #FF3737;
		}

		.common-btn {
			height: 60rpx;
			width: 160rpx;
			font-size: 28rpx;
			margin: 0;
		}
	}
}
}

</style>
